import { PropType } from 'vue'
import type { ExtractProps } from '@/utils/type'
import { useNamespace } from '@/utils'
import { localFile } from '@/utils/local-file'

export namespace variables {
  export const ns = useNamespace('Image')
}
export namespace ImageNS {
  export type Mode = 'scaleToFill' | 'aspectFit' | 'aspectFill'
    | 'widthFix' | 'heightFix'
    | 'top' | 'bottom' | 'center' | 'left' | 'right'
    | 'top left' | 'top right' | 'bottom left' | 'bottom right'
  export const name = variables.ns.name
  export const props = {
    /**
     * 图片源地址
     */
    src: String,
    /**
     * 是否使用懒加载
     */
    lazy: Boolean,
    /**
     * 图片的参数
     */
    imageProps: Object as PropType<Partial<{
      mode: Mode,
      fadeShow: boolean,
      webp: boolean,
      showMenuByLongpress: boolean
      draggable: boolean,
    }>>,
    /**
     * 加载失败的图片
     */
    errorImage: {
      type: String,
      default: localFile.getImage('components/image-error')
    },
    /**
     * 加载中的图片
     */
    loadingImage: {
      type: String,
      default: localFile.getImage('components/image-loading')
    },
    /**
     * 距离多远开始加载
     * @默认 { bottom: 100, right: 100 }
     */
    threshold: {
      type: Object as PropType<Record<'top' | 'left' | 'right' | 'bottom', number>>,
      default: () => ({ bottom: 100, right: 100 })
    }
  }
  export const emits = {
    success: () => true,
    error: (_err: any) => true,
    loading: () => true,
    /**
     * @param _timespace 最终加载图片花费了多长时间
     */
    complete: (_timespace: number) => true
  }
  export type Props = ExtractProps.Types<typeof props>
  export const Component = <{
    new(): {
      $props: Props
    }
  }>{}
}